<template>
  <div class="main">
    <el-form ref="ruleFormref" :model="userInfo" :rules="rules" label-width="220px">
      <el-form-item label="姓名" prop="username" label-width="220px">
        <el-input v-model="userInfo.username" placeholder="请输入姓名" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="工号" prop="workNumber" label-width="220px">
        <el-input v-model="userInfo.workNumber" placeholder="请输入工号" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile" label-width="220px">
        <el-input v-model="userInfo.mobile" placeholder="请输入手机号" style="width: 320px;" />
      </el-form-item>
      <!-- Cascader 级联选择器 -->
      <el-form-item label="部门" prop="departmentId" label-width="220px">
        <!-- 插入部门联动的组件 -->
        <!-- 我们自定义组件使用 v-model，展开写法就是 value="xoxx”和 @input="xox" 这样的简写，可以减少在父组件里面定义 -->
        <departmentcom v-model="userInfo.departmentId" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="userInfo.formOfEmployment" placeholder="请选择聘用形式" clearable style="width: 320px;">
          <el-option label="正式" :value="1" />
          <el-option label="非正式" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="userInfo.timeOfEntry"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="请选择入职时间"
          clearable
          style="width: 320px;"
        />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="userInfo.correctionTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="请选择转正时间"
          clearable
          style="width: 320px;"
        />
      </el-form-item>
      <!-- Upload 用户头像上传 -->
      <el-form-item label="员工头像" prop="staffPhoto">
        <!-- 我们自定义组件使用 v-model， -->
        <userinfoimg v-model="userInfo.staffPhoto" />
      </el-form-item>
      <el-form-item label-width="220px">
        <el-button type="primary" style="width: 100px;" @click="submitForm">保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import departmentcom from '@/views/employee/components/departmentcom.vue'
import userinfoimg from '@/views/employee/components/userinfoimg.vue'
import { postSysUserRequest, getUserRequest, putUserRequest } from '@/api/employee'
export default {
  name: 'AddEmployee',
  components: {
    departmentcom,
    userinfoimg
  },
  data() {
    // 时间校验
    const validateCorrectionTime = (rule, value, callback) => {
      console.log(this.userInfo.timeOfEntry, value)
      // 什么情况下 校验报错?入职时间>转正时间(使用时间戳)
      // 时间戳获取:+new Date()  Date .now()  new Date( )  getTime( )
      if (+new Date(this.userInfo.timeOfEntry) > +new Date(value)) {
        return callback(new Error('转正时间不能早于入职时间'))
      } else {
        callback()
      }
    }
    return {
      // 表单内容 名称去看一下接口名称
      userInfo: {
        username: '', // 员工名字
        workNumber: '', // 员工工号
        mobile: '', // 员工手机号
        departmentId: 0, // 员工部门id
        formOfEmployment: '', // 员工聘用形式
        timeOfEntry: '', // 员工入职日期
        correctionTime: '', // 员工转正日期
        staffPhoto: ''// 头像信息
      },
      // 非空正则验证
      rules: {
        // 手机号校验
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((\+|00)86)?1\d{10}$/, message: '请输入正确是手机号', trigger: 'blur' }],
        // 员工名字校验
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 4, message: '请输入1-4位姓名', trigger: 'blur' }],
        // 员工部门校验(专门放入另外一个组件)
        // departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
        // 员工聘用形式校验
        formOfEmployment: [{ required: true, message: '请选择员工聘用形式', trigger: 'change' }],
        // 员工入职日期校验
        timeOfEntry: [{ required: true, message: '请选择员工入职日期', trigger: 'change' }],
        // 员工转正日期校验
        correctionTime: [{ required: true, message: '请选择员工转正日期', trigger: 'change' },
          { validator: validateCorrectionTime, trigger: 'change' }]
      },
      // Cascader 级联选择器 引用之前写过的树状结构代码
      options: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        name: 'name'
      }
    }
  },
  // this.$route.params.id 比较冗余 我们还有高级的写法 通过声明一个变量isEdit 给他布尔值 来判断是新增(false)还是编辑(true)
  computed: {
    isEdit() {
      return !!this.$route.params.id
    }
  },
  // 钩子函数 获取-员工-基本信息ajax 调用编辑的表单数据回显功能
  // 这个页面是新增 和编辑 共用的页面，只有编辑的时候才需要根据id发请求，获取当前页面的数据用什么来判断?
  // 当前页面状态是 编辑 还是 新增 this.$route.params
  created() {
    if (this.isEdit) {
      this.getUser()
    }
  },
  methods: {
    // 发送 获取-员工-基本信息 编辑的表单数据回显的功能
    async getUser() {
      const res = await getUserRequest(this.$route.params.id)
      console.log(res)
      this.userInfo = res.data
    },
    // 登录事件
    submitForm() {
      this.$refs.ruleFormref.validate(async valid => {
        if (valid) {
          try {
            // 需要条件判断 通过computer里面定义的变量布尔值 来判断是新增(false)还是编辑(true)
            if (this.isEdit) {
              await putUserRequest(this.userInfo)
            } else {
              await postSysUserRequest(this.userInfo)
            }
            // 跳转到employee页面中
            this.$router.back('/employee')
          } catch (err) {
            this.$message('员工添加失败')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  padding: 30px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0
}
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.el-icon-plus{
  border: 1px dashed #d9d9d9;
}
</style>
